//默认情况夏，直接使用webpack .\src\main.js --output-filename  .\dist\bundle.js --output-path .  --mode development就能实现项目的构建了
//但是，如果只是运行webpack命令的话，需要在i项目的根目录中，创建webpack.config.js的文件
//而且，在这个配置文件中，必须显示声明要处理文件的路径和输出的文件的路径

const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin')

//导入把HEML页面生成到内存中的插件
const htmlWebpackPlug = require('html-webpack-plugin')//导入的是一个构造函数
//导入webpack插件
const webpack = require('webpack')
//导入删除文件夹的插件
//const cleanPlugin = require('clean-webpack-plugin') 不支持webpack4.0
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
//导入压缩JS文件插件
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
//导入抽离css文件插件
const miniCssExtractPlugin = require('mini-css-extract-plugin')
//导入压缩css文件插件
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
//注意:这里使用Node中的语法，向外暴露了一个配置对象
//因为 webpack这个构建工具，底层就是使用Node.js开发出来的



module.exports = {
    entry: {
        app:'./src/main.js',//这是项目的主入口文件
        vendors:['vue','vuex','vue-router','axios','mint-ui']//这是第三方包的名称
    },
    output:{
        path: path.resolve(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    plugins:[//插件数组
        new htmlWebpackPlug({//创建一个把HTML首页托管到内存中的插件
            template:'./src/index.html',//要把哪个HTML页面作为模板复制一份托管到内存中
            filename:'index.html',//指定，将来在内存中复制出来的页面，名称叫做index.html
            minify:{//表示提供压缩选项
                removeComments:true,//一处页面中的注释
                collapseWhitespace:true,//合并空白字符
                removeAttributeQuotes:true //移除属性节点上的引号
            }
        }),
        //new webpack.HotModuleReplacementPlugin()
        //new cleanPlugin('[dist]')不支持webpack4.0
        new CleanWebpackPlugin(),//指定每次重新发布的时候，要先朋除的文件夹
        // new webpack.optimize.CommonsChunkPlugin({
        //     name:'vendors',
        //     filename:'vendors.js'//指定抽离出来的第三方包文件命名
        // })
        new webpack.DefinePlugin({//此插件的作用，相当于在项目的全局，配置了一些全局可用的变量;将来我们引用的第三方包中，比如Vue，会检查webpack中有没有提供 process.env.NODE ENV字段，如果有，并且字段的名字为“production"，就表示是生产发布环境，那么会移除不必要的Vue警告功能;并做其它优化!  
            'process.env.NODE_ENV':'"production"',
            'myVar':'1234'
        }),
        new miniCssExtractPlugin({//抽离css文件
            filename:'css/style.css'
        }),
        new OptimizeCSSAssetsPlugin (),//压缩css文件
        new VueLoaderPlugin(),

    ],
    optimization:{
        splitChunks:{
            cacheGroups: {
                vendors: {
                    name: "vendors",
                    chunks: "initial",  //入口处开始提取代码
                }
             }
        },
        minimizer:[
            new UglifyJsPlugin({
                uglifyOptions:{
                    compress: false //压缩完毕的代码中，一处警告信息
                }
            })
        ]
    },
    // devServer:{// webpack-dev-server运行时候的指令
    //     //--open --port 3000 --host 127.0.0.1 --hot
    //     // open:true,
    //     port:3000,
    //     host:'127.0.0.1',
    //     hot:true,//启用热更新,这里的hot指令，需要配合一个热更新的 webpack插件才能正常使用
    // },
    module:{//用来配置非JS文件对应的loader的
        rules:[//就是这样非JS文件和loader之间对应关系
            // {test:/\.css$/,use:['style-loader','css-loader']},//创建处理css文件的loader匹配规则
            // {test:/\.less$/,use:[{loader: miniCssExtractPlugin.loader,options:{publicPath:'../'}},'css-loader','less-loader']},//配置处理less文件规则
            // {test:/\.scss$/,use:[{loader: miniCssExtractPlugin.loader,options:{publicPath:'../'}},'css-loader','sass-loader']},//配置处理cscc文件的规则
            // {test:/\.jpg|png|jpeg|gif|bmp$/,use:'url-loader?limit=25000&name=images/[hash:8]-[name].[ext]'},//配置处理样式表中图片的规则
            // {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},//添加转换JS文件的loader，其中，必须把node_modules目录设置为排除项，这样，在打包的时候，会忽略node_modules目录下的所有JS文件;否则项目运行不起来!
            // {test:/\.vue$/,use:'vue-loader'},//解析Vue组件的第三方loader
            // {test:/\.ttf|woff|woff2|eot|svg$/,use:'url-loader'},//处理样式中字体文件路径的问题
            {test:/\.css$/,use:['style-loader','css-loader']},//创建处理css文件的loader匹配规则
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},//配置处理less文件规则
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},//配置处理cscc文件的规则
            {test:/\.jpg|png|jpeg|gif|bmp$/,use:{loader:'url-loader?limit=25000&name=[hash:8]-[name].[ext]',options:{esModule: false}}},//配置处理样式表中图片的规则
            {test:/\.vue$/,use:'vue-loader'},//解析Vue组件的第三方loader
            {test:/\.ttf|woff|woff2|eot|svg$/,use:'url-loader'},//处理样式中字体文件路径的问题
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
        ]
    }
}


